import React from "react";
import {Switch, Route} from "react-router-dom";
import {NavBar} from "antd-mobile";
import TabbarLink from "../../component/tabbar-link/tabbar-link";
import Boss from "../boss/boss";
import Genius from "../genius/genius";
import User from "../user/user";
import Msg from "../msg/msg";
import {connect} from "react-redux";
import {getMsgList, recMsg} from "../../redux/chatMsg.redux";


@connect(
  state => state,
  {getMsgList, recMsg}
)
class DashBoard extends React.Component {
  componentDidMount () {
    if (!this.props.chatMsg.chatMsgList || !this.props.chatMsg.chatMsgList.length) {
      this.props.getMsgList();
      this.props.recMsg();
    }
  }

  render () {
    const {role} = this.props.user,
      {pathname} = this.props.history.location,
      tabList = [
        {
          path: "/boss",
          navText: "牛人列表",
          title: "牛人",
          icon: "boss.png",
          selectedIcon: "boss-active.png",
          component: Boss,
          hide: role !== "boss"
        },
        {
          path: "/genius",
          navText: "Boss列表",
          title: "Boss",
          icon: "job.png",
          selectedIcon: "job-active.png",
          component: Genius,
          hide: role === "boss"
        },
        {
          path: "/msg",
          navText: "消息",
          title: "消息",
          icon: "msg.png",
          selectedIcon: "msg-active.png",
          component: Msg,
          hide: false
        },
        {
          path: "/user",
          navText: "个人中心",
          title: "我",
          icon: "user.png",
          selectedIcon: "user-active.png",
          component: User,
          hide: false
        }
      ],
      nav = tabList.find(v => v.path === pathname),
      navText = nav ? nav.navText : "";
    return (
      <div>
        <NavBar className="am-navba-fixed" mode="dark">{navText}</NavBar>
        <div style={{marginTop: 45, marginBottom: 60}}>
          <Switch>
            {
              tabList.map(v =>
                <Route path={v.path} component={v.component} key={v.path}/>
              )
            }
          </Switch>
        </div>
        <TabbarLink tabList={tabList.filter(value => !value.hide)}/>
      </div>
    );
  }
}

export default DashBoard;